<template>
  <div class="me">
    <!-- 顶部 -->
    <div class="my_yf">
      <span>我的药房</span>
    </div>
    <!-- 用户信息 -->
    <div class="my_news">
      <div class="my_news_tx">
        <a href="/user/setUserInfo">
          <img
            nogoods="1"
            src="//img.yaofang.cn/mobile/touxiang.png"
            onerror="this.onerror=null;this.src='//img.yaofang.cn/mobile/touxiang.png'"
          />
        </a>
      </div>
      <div class="my_news_list">
        <span>15619710929</span>
        <span class="qbye">钱包余额:￥5061</span>
        <span class="yhjf">用户积分:55</span>
      </div>
    </div>
    <!-- 宫格 -->
    <div>
      <van-grid square :column-num="4" icon-size="26px">
        <van-grid-item
          v-for="(item,index) in melist"
          :key="index"
          :icon="item.melist_img"
          :text="item.melist_text"
        />
      </van-grid>
    </div>
    <!-- 用户设置 -->
    <div>
       <van-cell title="个人设置" icon="setting-o" to="/setting">
      <!-- 使用 right-icon 插槽来自定义右侧图标 -->
      <van-icon slot="right-icon" name="arrow" style="line-height: inherit;" />
    </van-cell>
     <van-cell title="我的评价" icon="chat-o" to="/selfcom">
      <!-- 使用 right-icon 插槽来自定义右侧图标 -->
      <van-icon slot="right-icon" name="arrow" style="line-height: inherit;" />
    </van-cell>
    </div>
    <!-- 底部标签栏 -->
    <div>
      <van-tabbar route>
        <van-tabbar-item icon="home-o" to="/">首页</van-tabbar-item>
        <van-tabbar-item icon="apps-o" to="/classify">分类</van-tabbar-item>
        <van-tabbar-item icon="shopping-cart-o" to="/goshop">购物车</van-tabbar-item>
        <van-tabbar-item icon="contact" to="/me">我的</van-tabbar-item>
      </van-tabbar>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      melist: []
    }
  },
  created () {
    this.$http.get('/melist_goods').then(res => {
      // console.log(res.data.data)
      this.melist = res.data.data
    })
  }
}
</script>

<style scoped>
.my_yf {
  width: 100%;
  height: 140px;
  position: relative;
  background: url(//img.yaofang.cn/mobile/new_my/head_bg.png) no-repeat 100% 0%/100%
    128%;
}
.my_yf span {
  display: block;
  width: 100%;
  text-align: center;
  color: #fff;
  font-size: 18px;
}
/* .my_yf img {
  width: 19px;
  height: 19px;
  position: absolute;
  top: 5px;
  right: 10px;
} */
.my_news_tx {
  float: left;
  margin: 0.1rem 0.32rem 0.1rem 0.48rem;
  padding-bottom: 0.66rem;
}
a {
  background: transparent;
  text-decoration: none;
  color: #333;
  display: block;
}
.my_news_tx img {
  width: 60px;
  height: 60px;
  border-radius: 20%;
  position: absolute;
  top: 45px;
  left: 20px;
}
.my_news_list {
  font-family: "宋体";
  color: #fff;
  position: absolute;
  top: 50px;
  left: 95px;
}
.my_news_list span {
  margin-top: 0.2rem;
  display: block;
  font-size: 16px;
}
.qbye {
  position: relative;
  left: 15px;
}
.yhjf {
  position: relative;
  left: 140px;
  top: -20px;
}
.van-grid {
    width: 100%;
}
.van-grid-item--square{
  border: 1px solid oldlace;
}
.van-grid-item__content--center {
background-color: #f0eff4;
}
.van-cell{
 background-color: snow;
}
</style>
